<template>
  <base-item title="诉求类型情况">
    <template #content>
      <div id="item-style4"></div>
    </template>
  </base-item>
</template>

<script setup lang="ts">
//组件
import BaseItem from "@/views/home/compoments/baseItem.vue";
//接口


//api
import {onMounted, reactive, ref} from 'vue';
import * as echarts from 'echarts'
import useSystemStore from "@/store/modules/system/system";
import useHomeStore from "@/store/modules/home/home";
import home from "@/store/modules/home/home";
import {itemStyle4Type} from "@/store/modules/home/type";
//data
let mychart: any = null
let homeStore = useHomeStore()
let option = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '诉求类型情况',
      type: 'pie',
      radius: ['55%', '80%'],
      // adjust the start and end angle
      label: {
        show: true,
        color: 'rgb(16,16,16)', // 标签颜色
        fontSize: 16, // 字体大小,
        formatter: (data: any) => {
          return data.data.name + '\n' + data.data.value + '件'
        },
      },
      data: [] as any[],
    }
  ]
};


//data

/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
const initEcahts = () => {
  option.series[0].data = []
  let data = [
    {value: 1048, name: '诉求类', name2: '投诉举报类', itemStyle: {color: 'rgb(202,183,255)'}},
    {value: 735, name: '咨询类', name2: '咨询类', itemStyle: {color: 'rgb(79,179,250)'}},
    {value: 580, name: '求助类', name2: '求助类', itemStyle: {color: 'rgb(255,220,139)'}},
    {value: 484, name: '其他事项类', name2: '其他事项类', itemStyle: {color: 'rgb(255,169,64)'}},
    {value: 300, name: '建议类', name2: '意见建议类', itemStyle: {color: 'rgb(149,244,223)'}}
  ]
  homeStore.itemStyle4Data.forEach((item: itemStyle4Type, index) => {
    // option.series[0].data.forEach((dataItem, index) => {
    //   if (item.eventTypeName == dataItem.name || item.eventTypeName == dataItem.name2) {
    //     dataItem.value = +item.num
    //   }
    // })
    data.forEach((dataItem) => {
      if (item.eventTypeName == dataItem.name || item.eventTypeName == dataItem.name2) {
        dataItem.value = +item.num
        option.series[0].data.push(dataItem)
      }
    })
  })
  mychart = echarts.init(document.getElementById('item-style4'))
  mychart.setOption(option)
}

defineExpose({
  initEcahts
})

</script>

<style lang="scss" scoped>
#item-style4 {
  width: 102%;
  height: 245px;
}
</style>
